<template>
    <div class="container">
        <div class="row">
            <div class="col-3">
                <div class="card" style="margin-top:20px">
                    <div class="card-body">
                        <img :src="$store.state.user.photo" alt="头像" style="width:100%">
                    </div>
                </div>
            </div>
            <div class="col-9">
                <div class="card" style="margin:20px">
                    <div class="card-header">
                        <span style="font-size: 120%">我的snake</span>
                        <button type="button" class="btn btn-success float-end" data-bs-toggle="modal" data-bs-target="#add_snake_btn">
                            添加snake
                        </button>
                    </div>
                    <!-- Modal -->
                    <div class="modal fade" id="add_snake_btn" tabindex="-1">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="exampleModalLabel">添加snake</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="mb-3">
                                        <label for="add_snake_title" class="form-label">名称</label>
                                        <input v-model="snakeadd.title" type="text" class="form-control" id="add_snake_title" placeholder="请输入snake名称">
                                    </div>
                                    <div class="mb-3">
                                        <label for="add_snake_description" class="form-label">简介</label>
                                        <textarea v-model="snakeadd.description" class="form-control" id="add_snake_description" rows="2" placeholder="请输入snake简介"></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label for="add_snake_content" class="form-label">代码</label>
                                        <VAceEditor
                                            v-model:value="snakeadd.content"
                                            @init="editorInit"
                                            lang="c_cpp"
                                            theme="textmate"
                                            style="height: 300px" />
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="error_message">{{ snakeadd.error_message }}</div>
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" @click="add_snake">确认</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr style="text-align:center">
                                    <th>名称</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="snake in snakes" :key="snake.id" style="text-align:center">
                                    <td>{{ snake.title }}</td>
                                    <td>{{ snake.createTime }}</td>
                                    <td>
                                    <button type="button" class="btn btn-warning" style="margin-right:15px" data-bs-toggle="modal" :data-bs-target="'#update_snake_modal' + snake.id">修改</button>

                                    <div class="modal fade" :id="'update_snake_modal' + snake.id" tabindex="-1">
                                        <div class="modal-dialog modal-xl">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h1 class="modal-title fs-5">修改snake</h1>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body" style="text-align:left">
                                                    <div class="mb-3">
                                                        <label for="snake_title" class="form-label">名称</label>
                                                        <input v-model="snake.title" type="text" class="form-control" id="snake_title" placeholder="请输入snake名称">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="snake_description" class="form-label">简介</label>
                                                        <textarea v-model="snake.description" class="form-control" id="snake_description" rows="2" placeholder="请输入snake简介"></textarea>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="snake_content" class="form-label">代码</label>
                                                        <VAceEditor
                                                            v-model:value="snake.content"
                                                            @init="editorInit"
                                                            lang="c_cpp"
                                                            theme="textmate"
                                                            style="height: 300px" />
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <div class="error_message">{{ snake.error_message }}</div>
                                                    <button @click="refresh_snakes" type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                                    <button type="button" class="btn btn-primary" @click="update_snake(snake)">确认</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <button type="button" class="btn btn-danger" @click="remove_snake(snake)">删除</button>
                                    </td>
                                </tr>    
                            </tbody> 
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


</template>

<script>
import { ref,reactive } from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex'
import { Modal } from 'bootstrap/dist/js/bootstrap'
import { VAceEditor } from 'vue3-ace-editor'
import ace from 'ace-builds'

export default {
    components: {
        VAceEditor
    },
    setup(){

        ace.config.set(
        "basePath", 
        "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/");

        const store = useStore();
        let snakes = ref([]);

        const snakeadd = reactive({
            title: "",
            description: "",
            content: "",
            error_message: ""
        })
        const refresh_snakes = () => {
            $.ajax({
                url: "http://localhost:8090/user/snake/query",
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token
                },
                success(resp){
                    snakes.value = resp;
                    
                }
            })
        }

        refresh_snakes();

        const add_snake = () => {
            snakeadd.error_message = "";
            $.ajax({
                url: "http://localhost:8090/user/snake/add",
                type: "post",
                data: {
                    title: snakeadd.title,
                    description: snakeadd.description,
                    content: snakeadd.content
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token
                },
                success(resp){
                    if(resp.error_message === "success"){
                        snakeadd.title = "";
                        snakeadd.description = "";
                        snakeadd.content = "";
                        Modal.getInstance("#add_snake_btn").hide();
                        refresh_snakes();
                    } else{
                        snakeadd.error_message = resp.error_message;
                    }
                }
            })
        }

        const update_snake = (snake) => {
            $.ajax({
                url: "http://localhost:8090/user/snake/update",
                type: "post",
                data: {
                    snake_id: snake.id,
                    title: snake.title,
                    description: snake.description,
                    content: snake.content
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token
                },
                success(resp){
                    if(resp.error_message === "success"){
                        Modal.getInstance('#update_snake_modal' + snake.id).hide();
                        refresh_snakes();
                    } else{
                        snake.error_message = resp.error_message;
                    }
                }
            })
        }

        const remove_snake = (snake) => {
            $.ajax({
                url: "http://localhost:8090/user/snake/remove",
                type: "post",
                data: {
                    snake_id: snake.id
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token
                },
                success(resp) {
                    if(resp.error_message === "success"){
                        refresh_snakes();
                    }
                }
            })
        }

        return{
            snakes,
            snakeadd,
            add_snake,
            remove_snake,
            update_snake,
            refresh_snakes
        }
    }
}
</script>

<style scoped>
.error_message{
    color: red;
}

</style>